<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>06.通过Proxy拦截对象属性的操作</title>
    </head>
    <body>
        <script>
            var obj = {
                'name' : 'allen',
                'group' : 'nodejs',
                '_type' : 'student'
            };

            /**
             * 1.做一个拦截器Proxy，用来拦截对象进行一些逻辑处理，
             * 注意这个Proxy拦截器目前只在火狐浏览器下实现了兼容
             * IE、Google、Safari、Opera都暂不支持，稍微注意下
             * 2.let proxy = new Proxy();有两个参数，如下
             * 1).第一个参数是需要被代理的对象
             * 2).第二个参数是代理的一些配置方法
             */
            let proxy = new Proxy(obj, {
                // target === obj
                set (target, key, value) {
                    // Reflect简单理解就是可以设置原始对象obj的默认值
                    // if ( key[0] !== '_' ) Reflect.set (target, key, value);
                    if ( key[0] !== '_' ) target[key] = value;
                },
                get (target, key) {
                    // if ( key[0] !== '_' ) return Reflect.get(target, key);
                    if ( key[0] !== '_' ) return target[key];
                },
                deleteProperty (target, key) {
                    /**
                     * 那么在这里呢，我们可以做一些逻辑的判断，
                     * 比如那些属性可以允许删除，哪些属性不允许
                     * 删除等简单的操作，下面我演示下：
                     */
                    // 这句话的意思就是说当obj的属性名不是以_开头的就可以进行删除
                    // if ( key[0] !== '_' ) Reflect.deleteProperty(target, key);
                    if ( key[0] !== '_' ) delete target[key];
                }
            });

            // result：allen
            // console.log(obj['name']);

            console.log(`删除之前的obj的_type属性为：${obj['_type']}`);
            console.log(`删除之前的obj的name属性为：${obj.name}`);
            console.log(`删除之前的obj的_type属性为：${obj.group}`);

            console.log(proxy._type, obj._type);
            delete proxy._type;
            delete proxy.name;
            delete proxy.group;

            console.log(`删除之后的obj的_type属性为：${obj['_type']}`);
            console.log(`删除之后的obj的name属性为：${obj.name}`);
            console.log(`删除之后的obj的_type属性为：${obj.group}`);
        </script>
    </body>
</html>
